<template>
	<view class="data-board-wrapper full box relative">
		<view class="filter-wrapper">
			<view class="filter-type">
				<view class="filter-type-item" v-for="(item,index) in filterTypeList" :key="index"
					:class="{active:item.value === activeType}" @click="changeType(item)">
					<text>{{ item.label }}</text>
				</view>
				<view class="filter-type-item" :class="{active:3 === activeType}" @click="openPop">
					<text>自定义</text>
				</view>
			</view>
			<template v-if="activeType < 3">
				<view class="filter-list-wrap">
					<view class="filter-date-item" v-for="(item,index) in filterDateOpt" :key="index"
						:class="{active:activeDate===item.value}" @click="changeDate(item)">
						<text>{{ item.label }}</text>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="time-range">
					<text>{{ single[0] }} ~ {{ single[1] }}</text>
				</view>
			</template>
		</view>
		<view class="data-board-count">
			<view class="data-item" v-for="(item,index) in dataItemOpt" :key="index">
				<text class="item-label">{{ item.label }}</text>
				<text class="item-value">{{ item.value }}</text>
			</view>
		</view>
		<view class="absolute">
			<uni-datetime-picker @change="dateChange" type="daterange" ref="datePicker" v-model="single">
				<view></view>
			</uni-datetime-picker>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				activeType: 0,
				activeDate: 0,
				dataBoard: {},
				visible: false,
				single: [],
				noAuthor: false,
			}
		},
		onShow(ev) {
			this.initData()
		},
		methods: {
			dateChange(ev) {
				this.single = ev
				this.activeType = 3
				this.initData(true)
				console.log(ev, 'ev');
			},
			openPop() {
				// this.visible = true
				console.log(this.$refs.datePicker.show());
			},
			changeType(item) {
				if (this.activeType === item.value) return
				this.activeType = item.value
				this.initData()
			},
			changeDate(item) {
				const { value } = item
				if (value === this.activeDate) return
				this.activeDate = value
				this.initData()
			},
			async initData(isF = false) {
				const { activeStore } = this
				if (activeStore.id === -1) return this.$toast({ title: '未选择店铺', time: 2000 })
				uni.showLoading({
					title: '正在获取',
					mask: true
				})
				const { mobile } = this.userInfo
				let payload = null
				if (!isF) {
					const { filterDateOpt, activeDate } = this
					const target = filterDateOpt.find(item => item.value === activeDate)
					if (!target) {
						wx.hideLoading()
						return this.$toast({ title: '参数错误' })
					}
					payload = target.payload
				} else {
					const [start_date, end_date] = this.single
					payload = { start_date, end_date }
				}
				this.https("/shujutongji/zhijietongji", {
					store_id: activeStore.id,
					mobile,
					...payload,
				}).then(async resp => {
					await this.$delay(300)
					const { code, data, msg } = resp
					if (!!data) {
						for (const key in data) {
							const v = data[key]
							if (!v) data[key] = '0'
							data[key] = (v * 1).toFixed(2)
						}
					}
					uni.hideLoading()
					this.dataBoard = data
					console.log(resp, 'resp');
				}).catch(error => {
					uni.hideLoading()
					if (error.msg) {
						uni.showModal({
							title: '温馨提示',
							content: error.msg,
							showCancel: false,
							complete: () => uni.switchTab({
								url: '/pages/index/index'
							})
						})
					}
					console.log(error, 'error');
				})
			},

			formatDate(timestamp) {
				const date = new Date(timestamp);
				const [year, month, day, ] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
				return `${year}-${('0' + month).slice(-2)}-${('0' + day).slice(-2)}`
			},
			getDateOpt() {
				const nowTime = Date.now()
				const oneDay = 1000 * 60 * 60 * 24
				return [{
						label: '今天',
						value: 0,
					},
					{
						label: '昨天',
						value: 1,
					},
					{
						label: '前天',
						value: 2,
					},
				].map((item, index) => {
					const curTime = nowTime - (index * oneDay)
					const start_date = this.formatDate(curTime)
					item.payload = {
						start_date,
						// end_date: this.formatDate(curTime + oneDay),
						end_date: start_date,
					}
					return item
				})
			},
			patch(v) {
				return ('0' + v).slice(-2)
			},
			f(date) {
				const { patch } = this
				const [y, m, d] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
				return `${y}-${patch(m)}-${patch(d)}`
			},

			getMonthOpt() {
				const { f } = this
				const date = new Date()

				function calcMonthDate(dis = 0) {
					const [year, month] = [date.getFullYear(), date.getMonth() - dis]
					const start_date = f(new Date(year, month))
					const end_date = f(new Date(new Date(year, month + 1).getTime() - 1))
					return {
						start_date,
						end_date
					}
				}
				return [{
						label: '本月',
						value: 0,
					},
					{
						label: '上月',
						value: 1,
					},
					{
						label: '前月',
						value: 2,
					},
				].map(item => {
					item.payload = calcMonthDate(item.value)
					return item
				})
			},
			getYearOpt() {
				const currentYear = new Date().getFullYear()
				const { f } = this

				function getYearDate(year) {
					const start_date = f(new Date(year, 0))
					const end_date = f(new Date(new Date(year + 1, 0).getTime() - 1))
					return { start_date, end_date }
				}
				return [{
						label: '本年',
						value: 0,
					},
					{
						label: '去年',
						value: 1,
					},
					{
						label: '前年',
						value: 2,
					},
				].map(item => {
					item.payload = getYearDate(currentYear - item.value)
					return item
				})
			},
		},
		computed: {
			dataItemOpt() {
				return [{
						key: 'weixin',
						label: '微信收入',
						value: '',
					},
					{
						key: 'meituan',
						label: '美团收入',
						value: '',
					},
					{
						key: 'douyin',
						label: '抖音收入',
						value: '',
					},
					{
						key: 'yue',
						label: '余额收入',
						value: '',
					},
					{
						key: 'chongzhi',
						label: '充值收入',
						value: '',
					},
					{
						key: 'total_liushui',
						label: '总流水',
						value: '',
					},
					{
						key: 'total_xianjin_liushui',
						label: '现金流',
						value: '',
					},
					{
						key: 'total_num',
						label: '订单数',
						value: '',
						notPrefix: true,
					}
				].map(item => {
					const { key } = item
					let value = this.dataBoard[key] || (item.notPrefix ? '0' : '0.00')
					if (!item.notPrefix) value = '￥' + value
					item.value = value
					return item
				})
			},
			filterDateOpt() {
				const { activeType } = this
				if (activeType === 0) return this.getDateOpt()
				if (activeType === 1) return this.getMonthOpt()
				if (activeType === 2) return this.getYearOpt()
				return []
			},
			filterTypeList() {
				return [{
					label: '按日',
					value: 0,
				}, {
					label: '按月',
					value: 1,
				}, {
					label: '按年',
					value: 2,
				}, ]
			},
			...mapGetters(['token', 'activeStore', 'userInfo']),
		}
	}
</script>

<style lang="scss" scoped>
	.data-board-wrapper {
		background-color: #F7F8FA;
		padding: 24rpx 32rpx;

		.time-range {
			text-align: center;
			padding: 32rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #707070;
		}

		.data-board-count {
			margin-top: 24rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			overflow: hidden;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			position: relative;
			padding: 24rpx;
			grid-row-gap: 24rpx;

			&::after {
				content: "";
				display: block;
				background-color: #f2f2f2;
				position: absolute;
				width: 2rpx;
				left: 50%;
				top: 24rpx;
				bottom: 24rpx;
				transform: translateX(-50%);
			}

			.data-item {
				width: 100%;
				display: flex;
				flex-flow: column;
				align-items: center;
				height: 120rpx;
				justify-content: center;

				.item-label {
					font-size: 28rpx;
					color: #707070;
				}

				.item-value {
					color: #4a5274;
					font-weight: bold;
					margin-top: 16rpx;
					height: 48rpx;
				}

			}
		}

		.filter-wrapper {
			background: #ffffff;

			.filter-list-wrap {
				padding: 16rpx 24rpx;
				box-sizing: border-box;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				justify-content: space-between;

				.filter-date-item {
					padding: 20rpx 38rpx;
					color: #5a5a5a;
					font-size: 30rpx;

					&.active {
						color: #ffffff;
						background-color: #409EFF;
					}
				}
			}

			.filter-type {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;

				.filter-type-item {
					flex: 1;
					padding: 24rpx 0;
					text-align: center;
					color: #5a5a5a;
					font-size: 30rpx;

					&.active {
						color: #ffffff;
						background-color: #409EFF;
					}
				}
			}
		}
	}
</style>